
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false"%>
<head>
    <title>${registrationNO}-视频回放</title>
    <%@ include file="videoHead.jsp"%>
</head>
<body class="videoSd" onload="Load()" onUnload="exitstopplay()" >
<div style="border:double;background: url(${appCtx}resources/images/video/bg.jpg) #ededed no-repeat 50% 0;width:100%;height:100%;">
<div style="width:1px;height:1px;">
		<object classid="clsid:92A85542-C1C4-4B79-A242-B3B3BA5AED72" width="100%" height="100%" name="showvideo" codebase="MMVideo.cab" id="sdObj">

		</object>
</div>
</div>
<div class="videoPage" style="display:none;">
	
	<div class="video-chart" >
	<%-- <div class="video" style="border:double;background: url(${appCtx}resources/images/video/bg.jpg) #ededed no-repeat 50% 0;">
		<object classid="clsid:92A85542-C1C4-4B79-A242-B3B3BA5AED72" width="100%" height="100%" name="showvideo" codebase="MMVideo.cab" id="sdObj">
		<a href='#' id="down" style="color:red; font-family:'宋体';">下载视频控件</a><br>
		</object>
	</div> --%>
	<div class="chart">
		<div style="width:100%;height:30%;padding-top:10px;">
		
		<table class="table">
			<tr>
				<td>图片</td>
				<td>疲劳报警</td>
				<td>夜间行车</td>
				<td>超速报警</td>
				<td>道路类型超速报警</td>
				<td>其他报警</td>
			</tr>
			<tr>
				<td><a href="javascript:;" id="imageSpan">-</a></td>
				<td><a href="javascript:;" id="tiredSpan">-</a></td>
				<td><a href="javascript:;" id="nightSpan">-</a></td>
				<td><a href="javascript:;" id="speedSpan">-</a></td>
				<td><a href="javascript:;" id="roadLevelSpeedSpan">-</a></td>
				<td><a href="javascript:;" id="otherSpan">-</a></td>
			</tr>
		</table>
		</div>
		<div id="speedCharts" style="width:100%;height:70%"></div>
	</div>
	</div>
	<div class="map-track">
		<div id="gdMap"></div>
		<div id="speedDiv">
			<div id="trackList"></div>
		</div>
	</div>
	
	
	
</div>

<!-- 用于控制弹出窗口- -->
<a id="txtOpenWindow" target="_self" class="dn"></a>
<div id="tooldiv">
		<a class="toolBtn" href="${ocxPath}OcxSD32.exe" id="downloadVideoControl">下载视频控件</a>
		<a class="toolBtn" href="javascript:;" id="backPlayVideoSdBtn" onclick="backPlayVideoSd()">视频回放</a>
		<a style="display:none;" class="toolBtn" href="javascript:;" id= "findBackVideoSdBtn" onclick="findBackVideoSd()">查看视频路线</a>

<!-- 		<button class="btn" onclick="downloadVideoControl()">下载视频控件</button>
  		<button class="btn"  id="backPlayVideoSdBtn" onclick="backPlayVideoSd()">视频回放</button>
  		<button class="btn"  id="findBackVideoSdBtn" onclick="findBackVideoSd()">查看视频路线</button> -->
  		<!-- 
  		<span id="t_m">00分</span> 
		<span id="t_s">00秒</span> -->
		<button class="dn" id="closeVideoDiv" >关闭视频</button>
		<button class="dn" id="downLoadVideoDiv" onclick="downLoadVideo()">下载视频</button>
		<button class="dn" id="setVideoDiv" onclick="setVideo()" >设置</button>
		<select id="selectVehicleSel" onchange="changeVechile()">
		</select>
	</div>
	
<!-- Modal -->
<div id="myModal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width:300px;left: 90%;top:5%;">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">视频回放设置</h3>
  </div>
  <div class="modal-body">
    <ul class="videoTable">
				<li>设备ID：</li><li><input type="text" id="devid" value="" disabled="disabled"></li>
				<li>通道号：</li>
				<li>
					<select id="ChannelNo" value=''>
						<option value="0" selected="selected">1</option>
						<option value="1">2</option>
						<option value="2">3</option>
						<option value="3">4</option>
					</select>
				</li>
				<li>回放下载时间段：</li>
				<li>
					<select onchange="changeBackSelect()" id="videoBack" value="">
					</select>
				</li>
				<li>开始时间：</li>
				<li class="bt10"><input type="text" class="Wdate" name="startDate" id="startDate" onclick="WdatePicker({isShowClear:false,dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'#F{$dp.$D(\'endDate\')}'})" />   </li>
				<li>结束时间：</li>
				<li><input type="text" class="Wdate" name="endDate" id="endDate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'startDate\')}',maxDate:'%y-%M-%d %H:%m:%s'})" />   </li>
				<li><p style="color:red;">注：默认下载路径 D:\video\ </p></li>
				
			</ul>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" onClick="QueryDevRecordFiles()">查询</button>
    <button class="btn btn-primary" id="btnPlayBack" >回放</button>   <!-- onClick="StopBack()"  -->
    <button class="btn btn-primary" id="btnVideoDown" >下载</button>
    <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
  </div>
</div>
<script>
	

var map = new AMap.Map('gdMap', {
     resizeEnable: true,
     zoom:11,
     center: [116.397428, 39.90923]
});
	

var oneDay = 10 * 1000;
var date = [];

var data = [];
var now = new Date();
var nowstr="";

var intsetInterval=0;

var  appCtx="${appCtx}";
var defaultTime =60;
var vehicleID ="${vehicleID}";

var commno ="${commno}";
var regNO ="${registrationNO}";
var internal_number ="${internal_number}";

var vehicleNO ="${vehicleNO}";

var fileVersion = "1.0.1.0";//当前版本号
var TransmitIP='${TransmitIP}';
var TransmitPort ='${TransmitPort}';
var ID ='${ID}';
var RegistrationNO ='${RegistrationNO}';
var ChannelNum = 4;//显示视频窗口数，默认打开4个
var playerH264;

var isinitselect = true;

var queryStartTime="";
var queryEndTime="";
var playStartTime="";
var playEndTime="";

var dataArray=new Array(); 
var videoCache = new HashMap();

var marketArray=[];
var lineListArray=[];

function Load() {
	try{
		 
		 initVehicleList();
		 initTable();
//		 queryVehicleTrack();
		 $("#devid").val(ID);
		 $("#startDate").val(getDay(1));
		 $("#endDate").val(getDay(0));
	/* 	 $("#btnPlayBack").unbind("click");
		 $("#btnPlayBack").bind("click",PlayBack);
		 $("#btnPlayBack").html("回放");
		 
		 $("#btnVideoDown").unbind("click");
		 $("#btnVideoDown").bind("click",DownloadByTime);
		 $("#btnVideoDown").html("下载"); */
		 try{
			 playerH264 = document.getElementById("sdObj"); 
			 playerH264.IOcxSetWin(1);
			 initVideo();	
			 backPlayVideoSd();
		 }catch(e){
		 		
		 }
		
		 /* defaultTime =$("#timeOutSel").val();
		 playerH264 = document.getElementById("sdObj"); 
		 playerH264.IOcxSetWin(ChannelNum);
		 $("#closeVideoDiv").unbind("click");
		 $("#closeVideoDiv").bind("click",buttonCloseVideo);
		 $("#closeVideoDiv").html("关闭视频")
		 setTimeout("initVideo()", 3000 );  */
		
	}catch(e){
		
	}
	
	try {
		var agent = navigator.userAgent.toLowerCase();
		if(agent.indexOf("win64") >= 0 || agent.indexOf("wow64") >= 0){
			document.getElementById("downloadVideoControl").href="${ocxPath}OcxSD64.exe";
			}else{
			document.getElementById("downloadVideoControl").href="${ocxPath}OcxSD32.exe";
		}
	}catch(e){
		
	}
}




function initTable(){
	$("#trackList").flexigrid({
        dataType : 'json',
        colModel : [{
        	display : '序号',
            name : 'id',
            width : 50,
            sortable : true,
            align : 'center'
        },{
            display : '车牌号',
            name : 'registrationNO',
            width : 120,
            sortable : false,
            align : 'center'
        },{
            display : '自编号',
            name : 'internal_number',
            width : 120,
            sortable : false,
            align : 'center'
        },{
            display : '定位时间',
            name : 'gps_time',
            width : 150,
            sortable : false,
            align : 'left',    
        },{
            display : '里程(km)',
            name : 'gps_mileage',
            width : 100,
            sortable : false,
            align : 'left',    
        },{
            display : '速度(km/h)',
            name : 'gps_speed',
            width : 100,
            sortable : false,
            align : 'left',    
        },{
            display : '纬度',
            name : 'latitude',
            width : 120,
            sortable : false,
            align : 'left',    
        },{
            display : '经度',
            name : 'longitude',
            width : 120,
            sortable : false,
            align : 'left',    
        },{
            display : '位置信息',
            name : 'address',
            width : 235,
            sortable : false,
            align : 'center',
            paramcolnames : ['id','longitude','latitude','gps_time','gps_mileage','gps_speed'],
			handlefunction: getAddress
        }],
        resizable : false,
        sortname : "id",// 第一次加载数据时排序列
        sortorder : "asc",// 第一次加载数据时排序类型
        usepager : false,// 是否分页，默认为true。
        showToggleBtn : false,
        showTableToggleBtn : false,// 是否显示收起/打开按钮,默认不显示。
        rowId : 'id',// 多选框绑定行的id,只有checkbox : true时才有效。
        width : '80%',// 表格宽度
        titDisplay:false,
        onSuccess : function(data){
        	if(lineListArray.length>1){
        		map.setCenter(new AMap.LngLat(lineListArray[0][0],lineListArray[0][1]));
  			 	var polyline = new AMap.Polyline({
  			        path: lineListArray,          //设置线覆盖物路径
  			        strokeColor: "#3366FF", //线颜色
  			        strokeOpacity: 1,       //线透明度
  			        strokeWeight: 5,        //线宽
  			        strokeStyle: "solid",   //线样式
  			        strokeDasharray: [10, 5] //补充线样式
  			    });
  			    polyline.setMap(map);
  		 	}
        	updatemyChart();
        },
        onSelectRow : function(row){
        	map.remove(marketArray);
        	marketArray=[];
        	map.setCenter(new AMap.LngLat(row.longitude, row.latitude));
        	
        	var marker = new AMap.Marker({
    	        map:map,
    	        position: [row.longitude, row.latitude],
    	        offset: new AMap.Pixel(-15, -10),
    	        icon: appCtx + "resources/images/mapTool/car1.png"
    	    });
    		var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)}); 
    		marker.content = '定位时间：'+row.gps_time+'</br>速度：'+row.gps_speed+' 公里/小时</br>里程：'+row.gps_mileage+' 公里';
    		marker.on('click', function(e){
    			 isopenWin=true;
    			 infoWindow.setContent(e.target.content);
    		     infoWindow.open(map, e.target.getPosition());
    		     
    		   	 
    		});
    		marketArray.push(marker);
    		marketArray.push(infoWindow);
        },
        onSelectAllRow : function(data){

        }
    });
}

function showAddress(id,lon,lat){
	var ctrl="#address_"+id;
	var geocoder = new AMap.Geocoder({
        radius: 1000,
        extensions: "all"
    });        
    geocoder.getAddress(new AMap.LngLat(lon,lat), function(status, result) {
        if (status === 'complete' && result.info === 'OK') {
        	var address=result.regeocode.formattedAddress;
        	$(ctrl).text(address);
        }
    });  
}
function getAddress(id,lon,lat,gps_time,gps_mileage,gps_speed){
	date.push(gps_time);
	data.push(gps_speed);
	
	 var arrgps=[];
		 arrgps.push(lon);
		 arrgps.push(lat);
	lineListArray.push(arrgps);
	showAddress(id,lon,lat);
	return '<span id="address_' + id + '">'+'</span>';
};


function initVehicleList(){
	$.ajax({
		type : 'post',
		async : false,
		url : appCtx + "/video/queryVideoVehicleList.html",
		cache : false,
		dataType : "JSON",
		success : function(data) {
			if(data){

				$('#selectVehicleSel').select2({
				  data: data
				})
				
				$('#selectVehicleSel').val(vehicleID).trigger("change");
			}
		}
	});

}

function initVideo(){
	try{
	//  playerH264.IOcxSetWin(ChannelNum);
		playerH264.NetSet3GServer(TransmitIP, TransmitPort);
		//playerH264.NetSet3GServer(TransmitIP, TransmitPort);
		playerH264.DevAddDevice(0, 0, ChannelNum, ID, RegistrationNO, TransmitIP, TransmitPort);
		// playerH264.IOpenVideo(13287310043,1); 
//		playerH264.IOpenVideoEx(ID, 0xff);
//		intsetInterval=window.setInterval("timeOut();", 1000);
	}catch(e){
			
	}
	  
}

function backPlayVideoSd(){
	try{
		playerH264.IDevPlayback(ID);
	}catch(e){
			
	}
	
}

function findBackVideoSd(){
	try{
		playerH264.IDevGetRecordFileList(ID,0xf);
	}catch(e){
			
	}
		
}

function timeOut(){
	if(defaultTime>0){
		defaultTime--;
		var m=Math.floor(defaultTime/60%60); 
		var s=Math.floor(defaultTime%60);
		if(m<10){
			document.getElementById("t_m").innerHTML = "0"+m + "分"; 
		}else{
			document.getElementById("t_m").innerHTML = m + "分"; 
		}
		if(s<10){
			document.getElementById("t_s").innerHTML = "0"+s + "秒";
		}else{
			document.getElementById("t_s").innerHTML = s + "秒";
		}
	}else{
		document.getElementById("t_m").innerHTML = "00" + "分";
		document.getElementById("t_s").innerHTML = "00" + "秒";
		window.clearInterval(intsetInterval);
		playerH264.IStopVideoEx(ID, 0xff); 
		$("#closeVideoDiv").unbind("click");
		$("#closeVideoDiv").bind("click",buttonOpenVideo);
		$("#closeVideoDiv").html("打开视频")
	}
}

function buttonOpenVideo(){
	 defaultTime =$("#timeOutSel").val();
	 playerH264.IOpenVideoEx(ID, 0xff);
	 intsetInterval=window.setInterval("timeOut();", 1000);
	 $("#closeVideoDiv").unbind("click");
	 $("#closeVideoDiv").bind("click",buttonCloseVideo);
	 $("#closeVideoDiv").html("关闭视频")
}
function buttonCloseVideo(){
	defaultTime=0;
	document.getElementById("t_m").innerHTML = "00" + "分";
	document.getElementById("t_s").innerHTML = "00" + "秒";
	window.clearInterval(intsetInterval);
	playerH264.IStopVideoEx(ID, 0xff); 
	$("#closeVideoDiv").unbind("click");
	$("#closeVideoDiv").bind("click",buttonOpenVideo);
	$("#closeVideoDiv").html("打开视频")
}

function exitstopplay(){
	try{
		playerH264.IStopVideoEx(ID, 0xff);
	}catch(e){
			
	}
	 
}
/* var defaultTime = videoOverTime;
function timeOut(){
	if(defaultTime>0){
		defaultTime--;
		$("#time_label").html(defaultTime+'秒后自动关闭视频');
	}else{
		playerH264.IStopVideoEx(ID, 0xff);
		$("#resetTimeout").show();
		$("#time_label").hide();
	}
}
function setTimeOut(){
	playerH264.IOpenVideoEx(ID, 0xff);
	$("#resetTimeout").hide();
	$("#time_label").show();
	defaultTime = videoOverTime;
}
 */




function addData(shift) {
    var hourstr=now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
    var minutestr=now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
    var secondstr=now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
    nowstr = [hourstr, minutestr, secondstr].join(':');
    date.push(nowstr);
    data.push(parseFloat(Math.random() * 30+50).toFixed(1));

    if (shift) {
        date.shift();
        data.shift();
    }

    now = new Date(+new Date(now) + oneDay);
}



option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: date
    },
    grid:{
    	x:30,
    	y:30,
    	x2:10,
    	y2:10
    	
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];
            return "时间:"+params.name+"<br/>"+"速度"+params.value;
        },
        axisPointer: {
            animation: false
        }
    },
    yAxis: {
        boundaryGap: [0, '50%'],
        name : '速度(km/h)',
	    type : 'value',
	    max : 150,
    },
    series: [
        {
            name:'速度',
            type:'line',
            smooth:true,
            symbol: 'none',
            stack: 'a',
            data: data
        }
    ]
};
var myChart = echarts.init(document.getElementById('speedCharts'));
	myChart.setOption(option);
	function updatemyChart() {
	    myChart.setOption({
	        xAxis: {
	            data: date
	        },
	        series: [{
	            name:'速度',
	            data: data
	        }]
	    });
	}

	
//打开新窗体
function openWindow(url){
	var openLink = $("#txtOpenWindow");
	openLink.attr('href', url);
	openLink[0].click();
}

function changeVechile(){
	if(isinitselect){
		isinitselect=false;
	}else{

			try{
				exitstopplay();
			}catch(e){
				
			}
			
			var vid=$("#selectVehicleSel").val();
			openWindow(appCtx + "/video/hisVideo.html?vehicleID="+vid);
		
		
	}
}


function downLoadVideo(){
	
}

function setVideo(){
	$('#myModal').modal('show');
}

function closeVideo(){
	$('#myModal').modal('hide');
}

/**
 * 获取今天之前的日期
 * @param day
 */
function getDay(day){
	var today = new Date(); 
	return getCalcuDay(today,day);
}
/**
 * 获取指定日期的前几天
 * @param today
 * @param day
 * @returns {String}
 */
function getCalcuDay(today,day){
    var targetday_milliseconds=today.getTime() - 1000*60*60*24*day;          

    today.setTime(targetday_milliseconds); //注意，这行是关键代码    
      
    var tYear = today.getFullYear();  
    var tMonth = today.getMonth();  
    var tDate = today.getDate();  
    var tHuors= today.getHours();
    var tMinutes= today.getMinutes();
    var tSeconds= today.getSeconds();
    
    tMonth = doHandleMonth(tMonth + 1);  
    tDate = doHandleMonth(tDate);  
    tHuors = doHandleMonth(tHuors);  
    tMinutes = doHandleMonth(tMinutes);  
    tSeconds = doHandleMonth(tSeconds); 
    return tYear+"-"+tMonth+"-"+tDate+" "+tHuors+":"+tMinutes+":"+tSeconds;  
} 
function doHandleMonth(month){  
    var m = month;  
    if(month.toString().length == 1){  
       m = "0" + month;  
    }  
    return m;  
} 

var loadXML = function(xmlString){
    var xmlDoc=null;
    //判断浏览器的类型
    //支持IE浏览器 
    if(!window.DOMParser && window.ActiveXObject){   //window.DOMParser 判断是否是非ie浏览器
        var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM'];
        for(var i=0;i<xmlDomVersions.length;i++){
            try{
                xmlDoc = new ActiveXObject(xmlDomVersions[i]);
                xmlDoc.async = false;
                xmlDoc.loadXML(xmlString); //loadXML方法载入xml字符串
                break;
            }catch(e){
            }
        }
    }
    //支持Mozilla浏览器
    else if(window.DOMParser && document.implementation && document.implementation.createDocument){
        try{
            /* DOMParser 对象解析 XML 文本并返回一个 XML Document 对象。
             * 要使用 DOMParser，使用不带参数的构造函数来实例化它，然后调用其 parseFromString() 方法
             * parseFromString(text, contentType) 参数text:要解析的 XML 标记 参数contentType文本的内容类型
             * 可能是 "text/xml" 、"application/xml" 或 "application/xhtml+xml" 中的一个。注意，不支持 "text/html"。
             */
            domParser = new  DOMParser();
            xmlDoc = domParser.parseFromString(xmlString, 'text/xml');
        }catch(e){  
        }
    }
    else{
        return null;
    }

    return xmlDoc;
}

function changeBackSelect(){
	var keyname=$("#videoBack").val();
	var objVideo=videoCache.get(keyname);
	
	playStartTime=objVideo.startTime;
	playEndTime=objVideo.stopTime;
}

function queryVehicleTrack(){
	 var paramsGrid = [{
        name : 'vehicleID',
        value : vehicleID
    },{
        name : 'playStartTime',
        value : playStartTime
    },{
        name : 'playEndTime',
        value : playEndTime
    },{
        name : 'registrationNO',
        value : regNO
    },{
        name : 'internal_number',
        value : internal_number
    }];
 
	
	$("#trackList").flexOptions({
		url : appCtx + "/video/queryVideoVehicleTrackListForGrid.html",
		newp : 1,// 设置起始页
		params : paramsGrid
	}).flexReload();// 重新加载  
	

}

</script>
</body>
</html>
